<template>
    <div class="default-main ba-table-box">
        <div style="width: 100%; background-color: #fff; padding: 5px">
            <el-input v-model="filterParams.nickname" class="ml-3 w-40" placeholder="用户名称" clearable></el-input>
            <el-input v-model="filterParams.order_no" class="ml-3 w-40" placeholder="订单编号" clearable></el-input>
            <el-input v-model="filterParams.mobile" class="ml-3 w-40" placeholder="用户手机号" clearable></el-input>
            <el-button class="ml-3" @click="resetChange"> <Icon name="fa fa-refresh" class="text-current text-sm mr-1"></Icon>重置 </el-button>
            <el-button type="primary" @click="getData"> <Icon name="fa fa-search" class="text-white text-sm mr-1"></Icon>查询 </el-button>
        </div>
        <div class="bg-white mt-2 p-3">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="tabChange">
                <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name"></el-tab-pane>
            </el-tabs>
        </div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="name" label="商品信息" width="250">
                <template #default="scope">
                    <div style="display: flex; align-items: center; margin-bottom: 12px" v-for="(item, key) in scope.row.order_goods" :key="key">
                        <el-image
                            style="width: 100px; height: 130px"
                            :src="item.goods_image"
                            :fit="item.goods_name"
                            :preview-src-list="[item.goods_image]"
                            hide-on-click-modal
                            preview-teleported
                        />
                        <div style="flex: 1; margin-left: 12px">
                            <div>{{ item.goods_name }}</div>
                            <div>{{ item.card?.ean }}</div>
                            <div>{{ item.card?.tags }}</div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="商品规格" width="180">
                <template #default="scope">
                    <div style="display: flex; align-items: center; height: 130px" v-for="(item, key) in scope.row.order_goods" :key="key">
                        {{ item.sku_name }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="单价" width="100">
                <template #default="scope">
                    <div style="display: flex; align-items: center; height: 130px" v-for="(item, key) in scope.row.order_goods" :key="key">
                        ￥{{ item.price }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="数量" width="80">
                <template #default="scope">
                    <div style="display: flex; align-items: center; height: 130px" v-for="(item, key) in scope.row.order_goods" :key="key">
                        {{ item.num }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="goods_money" label="总价" width="80" />
            <el-table-column prop="shop_remark" label="备注" width="150" />
            <el-table-column label="订单信息">
                <template #default="scope">
                    <div v-if="scope.row.order_delivery[0]">
                        <span>{{ scope.row.member.nickname }}</span> <span>{{ scope.row.member.mobile }}</span
                        >&nbsp;&nbsp; <span>订单号：{{ scope.row?.order_no }}</span
                        >&nbsp;&nbsp;<span>下单时间：{{ scope.row.create_time }}</span
                        ><br />
                        <span v-if="scope.row.order_delivery[0]">物流信息：</span><span>{{ scope.row.order_delivery[0]?.send_name }}</span
                        >&nbsp;&nbsp;<span>{{ scope.row.order_delivery[0]?.send_mobile }}</span
                        >&nbsp;&nbsp; <span>{{ scope.row.order_delivery[0]?.company.company_name }}</span
                        >&nbsp;&nbsp;<span>{{ scope.row.order_delivery[0]?.express_number }}</span
                        ><br />
                        <span v-if="scope.row.order_delivery[0]">收货地址：{{ scope.row.order_delivery[0]?.send_full_address }}</span>
                    </div>
                    <div v-else>无</div>
                </template>
            </el-table-column>
            <el-table-column prop="status_name.name" label="状态" width="80">
                <template #default="scope">
                    <div style="color: red">{{ scope.row.status_name.name }}</div>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template #default="scope"
                    ><el-tooltip class="box-item" effect="dark" content="查看订单" placement="top">
                        <el-button type="primary" size="small" @click="godetail(scope.row)" class="ml-3 w-7 h-7">
                            <Icon name="fa fa-pencil" class="text-white text-lg"></Icon>
                        </el-button> </el-tooltip
                ></template>
            </el-table-column>
        </el-table>
        <div class="paging">
            <el-pagination
                v-model:currentPage="filterParams.page"
                v-model:page-size="filterParams.limit"
                background
                layout="sizes, prev, pager, next, jumper"
                :total="paging.total"
                @size-change="getData"
                @current-change="getData"
            />
        </div>
        <ShowMdale :modelValue="fastEditShow" :cateid="cateid" @close="fastEditShow = false"></ShowMdale>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import createAxios from '/@/utils/axios'
import ShowMdale from './detail.vue'
// import { log } from '/@/api/backend/routine/AdminInfo'
let fastEditShow: any = ref(false) // 控制快速修改信息的弹层
let cateid = ref() // 类别列表
const godetail = (row: any) => {
    fastEditShow.value = true
    // console.log('eoeoeoe', row.order_id)
    cateid.value = row.order_id
}
let filterParams: any = reactive({
    status: '', //
    nickname: null, //
    order_no: null, // 分类ID
    mobile: null, //编号
    page: 1,
    limit: 10,
})
let currentRow: any = ref({}) // 当前选择的行数据
let infoShow: any = ref(false) // 控制修改信息的弹层

let tableData = ref()
// const
let paging = ref({
    total: 0,
})

const handleClick = () => {
    getData()
}
const getData = () => {
    createAxios({ url: '/admin/order.Refund/lists', method: 'get', params: { ...filterParams } }).then((res) => {
        // console.log('res111111111111', res)
        tableData.value = res.data.data
        paging.value.total = res.data.total
    })
}
let activeName: any = ref('') //tab切换绑定值
const editableTabs = ref([
    {
        title: '全部',
        name: '',
    },
    {
        title: '待申请',
        name: 3,
    },
    {
        title: '已寄回',
        name: 4,
    },
    {
        title: '已收货',
        name: 5,
    },
])
const tabChange = () => {
    // console.log(activeName)
    filterParams.status = activeName
    getData()
}
const resetChange = () => {
    filterParams.nickname = ''
    filterParams.order_no = ''
    filterParams.mobile = ''
    getData()
}
getData()
onMounted(() => {})
</script>

<style scoped lang="scss">
.paging {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>
